<!--
1.


-->



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <style>
        .ball{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="toggle">toggle</button>
        <transition
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter"
        >
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>

    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                flag:false
            },
            methods:{
                toggle(){
                    this.flag=!this.flag;
                },
                beforeEnter(el){
                    el.style.transform="translate(0, 0)"
                },
                enter(el,done){
                    el.offsetWidth;
                    el.style.transform="translate(150px,450px)";
                    el.style.transition='all 1s ease';
                    done();
                },
                afterEnter(el){
                    // el.style.display="none";
                    // this.toggle();
                    el.style.opacity=0.5;
                    this.toggle();
                },
            }
        })
    </script>

</body>
</html>